<!--用水量 waterConsum-->
<template>
    <Layout>
        <Form ref="queryForm" :model="dataToQuery" :label-width="120">
            <Row v-show="!switchFlag" class="query-form" >
                <Col span="8">
                    <FormItem label="企业名称：" prop="order">
                        <cascader-dom class="query-form-el" ref='queryOrgCascader' @setOrgInfo='setQueryCompanyId' :orgTree="true"
                                      :currentOrgId="dataToQuery.companyId" :setCurrentName="{label:dataToQuery.companyName,value:dataToQuery.companyId}"></cascader-dom>                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="登记时间：" prop="content" >
                        <DatePicker class="query-form-el" v-model="dataToQuery.dateRange" format="yyyy-MM-dd" type="daterange" placement="bottom-end" placeholder="请选择查询时间段"
                                    @on-change="onSelectQueryDateRange"></DatePicker>
                    </FormItem>
                </Col>
                <Col span="8">
                    <Button @click="switchQuery(true)" class="ivu-btn-switch" type="text">展开∨</Button>
                    <Button @click="reset1" class="ivu-btn-reset"  >重置</Button>
                    <Button type="primary" class="ivu-btn-query"   icon="md-search"  @click="query">查询</Button>
                </Col>
            </Row>
            <Row v-show="switchFlag" class="query-form">
                <Col span="8">
                    <FormItem label="企业名称：" prop="belongOrgId">
                        <cascader-dom class="query-form-el" ref='queryOrgCascader1' @setOrgInfo='setQueryCompanyId' :orgTree="true"
                                      :currentOrgId="dataToQuery.companyId" :setCurrentName="{label:dataToQuery.companyName,value:dataToQuery.companyId}"></cascader-dom>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label="登记时间：" prop="content" >
                        <DatePicker class="query-form-el" v-model="dataToQuery.dateRange" format="yyyy-MM-dd" type="daterange" placement="bottom-end" placeholder="请选择查询时间段"
                                    @on-change="onSelectQueryDateRange"></DatePicker>
                    </FormItem>
                </Col>
                <Col span="8">
                    <FormItem label='总计划量：' prop='totalPlan'>
                        <InputNumber type='text' v-model='dataToQuery.totalPlanFrom' style="width: 46%" :min="0"></InputNumber> -
                        <InputNumber type='text' v-model='dataToQuery.totalPlanTo' style="width: 46%" :min="0"></InputNumber>
                    </FormItem>
                </Col>
            </Row>
            <Row v-show="switchFlag" class="query-form">
                <Col span="8">
                    <FormItem label='总实用量：' prop='totalConsum'>
                        <InputNumber type='text' v-model='dataToQuery.totalConsumFrom' style="width: 46%" :min="0"></InputNumber> -
                        <InputNumber type='text' v-model='dataToQuery.totalConsumTo' style="width: 46%" :min="0"></InputNumber>
                    </FormItem>
                </Col>
                <Col span="8" offset="8">
                    <Button @click="switchQuery(false)" class="ivu-btn-switch" type="text">收起∧</Button>
                    <Button @click="reset1" class="ivu-btn-reset">重置</Button>
                    <Button class="ivu-btn-query" icon="md-search" @click="query">查询</Button>
                </Col>
            </Row>
            <Row class="query-form">
                <Col span="24">
                    <Button size="large"  class="ivu-btn-add" icon="md-add"  @click="addInfo">新增</Button>
                </Col>
            </Row>
        </Form>
        <Table ref='table' :height="tableHeight"  no-data-text="没有查询到相关数据!" @on-selection-change = 'getSelectRows' :loading='pageStatus.loading'
               border :columns="columns1"  :data="dataTable" >
        </Table>
        <Row style="margin-right:10px;">
            <Col span="24" >
                <Page style="float: right" :total="pagedata.total" :page-size="pagedata.pageSize" @on-change="pageChange" @on-page-size-change="pageSizeChange" :page-size-opts="pageSizeArray" show-total show-sizer show-elevator />
            </Col>
        </Row>
        <Modal  title="用水量登记" :transfer=false :mask-closable="false" v-model="dialogShow" v-if="dataToView && dialogShow" :width=800 :styles="{height:'694px'}"  class-name='limit-height-dialog' >
            <Row>
                <Col span="24">
                    <Form ref="dialogForm" :class="mode === 'view'?'modal-view-detail':'modal-form'" :show-message="false" :model="dataToView" :rules="mode === 'view'?{} :ruleCustom"  :label-position="mode === 'view'?'right':'top'" :label-width="mode === 'view'?130:null">
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="23">
                                <FormItem label='企业名称：' prop='companyId'>
                                    <div v-if="mode === 'view'">{{dataToView.companyName}}</div>
                                    <cascader-dom v-else ref='orgCascader' @setOrgInfo='setCompanyId' @setOrgname="setCompanyName" :orgTree="true" :currentOrgId = "dataToView.companyId" :setCurrentName="{label:dataToView.companyName,value:dataToView.companyId}" ></cascader-dom>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="7">
                                <FormItem label='总计划量：' prop='totalPlan'>
                                    <div v-if="mode === 'view'">{{dataToView.totalPlan}}</div>
                                    <InputNumber v-else type='text' v-model='dataToView.totalPlan' class="query-form-el" :min="0"></InputNumber>
                                </FormItem>
                            </Col>
                            <Col span="7">
                                <FormItem label='总实用量：' prop='totalConsum'>
                                    <div v-if="mode === 'view'">{{dataToView.totalConsum}}</div>
                                    <InputNumber v-else v-model='dataToView.totalConsum' class="query-form-el" :min="0"></InputNumber>
                                </FormItem>
                            </Col>
                            <Col span="7">
                                <FormItem label='节余率：' prop='balanceRate'>
                                    <div v-if="mode === 'view'">{{dataToView.balanceRate}}</div>
                                    <InputNumber v-else v-model='dataToView.balanceRate' class="query-form-el" :min="0"></InputNumber>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="7">
                                <FormItem label='自备井计划量：' prop='wellPlan'>
                                    <div v-if="mode === 'view'">{{dataToView.wellPlan}}</div>
                                    <InputNumber v-else type='text' v-model='dataToView.wellPlan' class="query-form-el" :min="0"></InputNumber>
                                </FormItem>
                            </Col>
                            <Col span="7">
                                <FormItem label='自备井实用量：' prop='wellConsum'>
                                    <div v-if="mode === 'view'">{{dataToView.wellConsum}}</div>
                                    <InputNumber v-else type='text' v-model='dataToView.wellConsum' class="query-form-el" :min="0"></InputNumber>
                                </FormItem>
                            </Col>
                            <Col span="7">
                                <FormItem label='自备井节余率：' prop='wellBalanceRate'>
                                    <div v-if="mode === 'view'">{{dataToView.wellBalanceRate}}</div>
                                    <InputNumber v-else type='text' v-model='dataToView.wellBalanceRate' class="query-form-el" :min="0"></InputNumber>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="7">
                                <FormItem label='自来水计划量：' prop='waterPlan'>
                                    <div v-if="mode === 'view'">{{dataToView.waterPlan}}</div>
                                    <InputNumber v-else v-model='dataToView.waterPlan' class="query-form-el" :min="0"></InputNumber>
                                </FormItem>
                            </Col>
                            <Col span="7">
                                <FormItem label='自来水实用量：' prop='waterConsum'>
                                    <div v-if="mode === 'view'">{{dataToView.waterConsum}}</div>
                                    <InputNumber v-else v-model='dataToView.waterConsum' class="query-form-el" :min="0"></InputNumber>
                                </FormItem>
                            </Col>
                            <Col span="7">
                                <FormItem label='自来水节余率：' prop='waterBalanceRate'>
                                    <div v-if="mode === 'view'">{{dataToView.waterBalanceRate}}</div>
                                    <InputNumber v-else v-model='dataToView.waterBalanceRate' class="query-form-el" :min="0"></InputNumber>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="7">
                                <FormItem label='地热水计划量：' prop='geothermalPlan'>
                                    <div v-if="mode === 'view'">{{dataToView.geothermalPlan}}</div>
                                    <InputNumber v-else v-model='dataToView.geothermalPlan' class="query-form-el" :min="0"></InputNumber>
                                </FormItem>
                            </Col>
                            <Col span="7">
                                <FormItem label='地热水实用量：' prop='geothermalConsum'>
                                    <div v-if="mode === 'view'">{{dataToView.geothermalConsume}}</div>
                                    <InputNumber v-else v-model='dataToView.geothermalConsume' class="query-form-el" :min="0"></InputNumber>
                                </FormItem>
                            </Col>
                            <Col span="7">
                                <FormItem label='地热水节余率：' prop='geothermalRate'>
                                    <div v-if="mode === 'view'">{{dataToView.geothermalRate}}</div>
                                    <InputNumber v-else v-model='dataToView.geothermalRate' class="query-form-el" :min="0"></InputNumber>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="7">
                                <FormItem label='地下水计划量：' prop='groundWaterPlan'>
                                    <div v-if="mode === 'view'">{{dataToView.groundWaterPlan}}</div>
                                    <InputNumber v-else v-model='dataToView.groundWaterPlan' class="query-form-el" :min="0"></InputNumber>
                                </FormItem>
                            </Col>
                            <Col span="7">
                                <FormItem label='地下水实用量：' prop='groundWaterConsum'>
                                    <div v-if="mode === 'view'">{{dataToView.groundWaterConsum}}</div>
                                    <InputNumber v-else v-model='dataToView.groundWaterConsum' class="query-form-el" :min="0"></InputNumber>
                                </FormItem>
                            </Col>
                            <Col span="7">
                                <FormItem label='地下水节余率：' prop='groundWaterRate'>
                                    <div v-if="mode === 'view'">{{dataToView.groundWaterRate}}</div>
                                    <InputNumber v-else v-model='dataToView.groundWaterRate' class="query-form-el" :min="0"></InputNumber>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="7">
                                <FormItem label='登记人：' prop='registrant'>
                                    <div v-if="mode === 'view'">{{dataToView.registrant}}</div>
                                    <Input v-else type='text' v-model='dataToView.registrant' readonly></Input>
                                </FormItem>
                            </Col>
                            <Col span="7">
                                <FormItem label='登记时间：' prop='registTime'>
                                    <div v-if="mode === 'view'">{{renderViewDate(dataToView.registTime)}}</div>
                                    <DatePicker v-else type="date" placeholder="请选择日期" class="query-form-el" v-model='dataToView.registTime' readonly></DatePicker>
                                </FormItem>
                            </Col>
                            <Col span="7"></Col>
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                        </Row>
                        <Row type="flex" justify="space-around" class="code-row-bg">
                            <Col span="23">
                                <FormItem label='备注：' prop='notes'>
                                    <div v-if="mode === 'view'">{{dataToView.notes}}</div>
                                    <Input v-else type='textarea' v-model='dataToView.notes'></Input>
                                </FormItem>
                            </Col>
                        </Row>
                    </Form>
                </Col>
            </Row>
            <div slot="footer">
                <Button v-if="mode != 'view'" type="primary"  class='ivu-btn-save' @click="submit('dialogForm')" >确定</Button>
                <Button v-if="mode != 'view'" type="primary"  class='ivu-btn-cancel' @click="handleCancel" >取消</Button>
                <Button v-if="mode === 'view'" class='ivu-btn-save' @click="dialogShow=false">关闭</Button>
            </div>
        </Modal>
    </Layout>
</template>

<script>
    import {Api} from '@/api/index.js'
    import {formatDate} from '@/tools/index'
    import _deepclone from 'lodash/cloneDeep'
    var cascaderDom = () => import('@/components/cascader-dom.vue');
    import pageCommonFunction from '@/components/pageCommonFunction.js'
    export default {
        components:{
            cascaderDom
        },
        data(){
            return {
                ...this.createCommonDataField(),
                columns1: [
                    { title: '序号', width: 80, fixed: 'left', align: 'center', render: this.indexColumnsRender},
                    { key:'companyName',title: '企业名称',  align: 'center', minWidth: 200},
                    { key:'totalPlan',title: '总计划量',  align: 'center', width: 120},
                    { key:'totalConsum',title: '总实用量',  align: 'center', width: 120 },
                    { key:'balanceRate',title: '节余率',  align: 'center', width: 120 },
                    { key:'waterPlan',title: '自来水计划量',  align: 'center', width: 120 },
                    { key:'waterConsum',title: '自来水实用量',  align: 'center', width: 120 },
                    { key:'waterBalanceRate',title: '自来水节余率',  align: 'center' , width: 120 },
                    { key:'wellPlan',title: '自备井计划量',  align: 'center', width: 120  },
                    { key:'wellConsum',title: '自备井实用量',  align: 'center', width: 120  },
                    { key:'wellBalanceRate',title: '自备井节余率',  align: 'center', width: 120  },
                    { key:'geothermalPlan',title: '地热水计划量',  align: 'center', width: 120  },
                    { key:'geothermalConsume',title: '地热水实用量',  align: 'center', width: 120  },
                    { key:'geothermalRate',title: '地热水节余率',  align: 'center', width: 120  },
                    { key:'groundWaterPlan',title: '地下水计划量',  align: 'center', width: 120  },
                    { key:'groundWaterConsum',title: '地下水实用量',  align: 'center', width: 120  },
                    { key:'groundWaterRate',title: '地下水节余率',  align: 'center', width: 120  },
                    { key:'registrant',title: '登记人',  align: 'center', width: 120  },
                    { key:'registTime',title: '登记时间',  align: 'center', width: 120, render: this.renderCellDate },
                    this.getActionColumns()
                ],
                ruleCustom : {
                    companyId: [{ required: true, message: '请填写企业名称', trigger: 'change' } ],
                    totalPlan: [{ pattern: /^([0-9][0-9]*)+(.[0-9]{1,4})?$/, message: '总计划量必须为数字', trigger: 'change',type:'number'}],
                    totalConsum: [{ pattern: /^([0-9][0-9]*)+(.[0-9]{1,4})?$/, message: '总实用量必须为数字', trigger: 'change',type:'number'}],
                    balanceRate: [{ pattern: /^([0-9][0-9]*)+(.[0-9]{1,4})?$/, message: '节余率必须为数字', trigger: 'change',type:'number'}],
                    waterPlan: [{ pattern: /^([0-9][0-9]*)+(.[0-9]{1,4})?$/, message: '自来水计划量必须为数字', trigger: 'change',type:'number'}],
                    waterConsum: [{ pattern: /^([0-9][0-9]*)+(.[0-9]{1,4})?$/, message: '自来水实用量必须为数字', trigger: 'change',type:'number'}],
                    waterBalanceRate: [{ pattern: /^([0-9][0-9]*)+(.[0-9]{1,4})?$/, message: '自来水节余率必须为数字', trigger: 'change',type:'number'}],
                    wellPlan: [{ pattern: /^([0-9][0-9]*)+(.[0-9]{1,4})?$/, message: '自备井计划量必须为数字', trigger: 'change',type:'number'}],
                    wellConsum: [{ pattern: /^([0-9][0-9]*)+(.[0-9]{1,4})?$/, message: '自备井实用量必须为数字', trigger: 'change',type:'number'}],
                    wellBalanceRate: [{ pattern: /^([0-9][0-9]*)+(.[0-9]{1,4})?$/, message: '自备井节余率必须为数字', trigger: 'change',type:'number'}],
                    geothermalPlan: [{ pattern: /^([0-9][0-9]*)+(.[0-9]{1,4})?$/, message: '地热水计划量必须为数字', trigger: 'change',type:'number'}],
                    geothermalConsume: [{ pattern: /^([0-9][0-9]*)+(.[0-9]{1,4})?$/, message: '地热水实用量必须为数字', trigger: 'change',type:'number'}],
                    geothermalRate: [{ pattern: /^([0-9][0-9]*)+(.[0-9]{1,4})?$/, message: '地热水节余率必须为数字', trigger: 'change',type:'number'}],
                    groundWaterPlan: [{ pattern: /^([0-9][0-9]*)+(.[0-9]{1,4})?$/, message: '地下水计划量必须为数字', trigger: 'change',type:'number'}],
                    groundWaterConsum: [{ pattern: /^([0-9][0-9]*)+(.[0-9]{1,4})?$/, message: '地下水实用量必须为数字', trigger: 'change',type:'number'}],
                    groundWaterRate: [{ pattern: /^([0-9][0-9]*)+(.[0-9]{1,4})?$/, message: '地下水节余率必须为数字', trigger: 'change',type:'number'}],
                },
                tableHeight:10,
                // api
                queryUrl:Api.queryWaterConsum,
                deleteUrl:Api.deleteWaterConsum,
                bthDeleteUrl:Api.batchDeleteWaterConsum,
                getUrl:Api.getWaterConsum,
                updateUrl:Api.updateWaterConsum,
                saveUrl:Api.saveWaterConsum,
            }
        },
        mounted() {
             this.setTableHeight();
            this.reset1();
        },
        methods:{
            ...pageCommonFunction,
            deleteData(params) {
                this.deleteDateAjax(params);
            },
            reset1(){
                this.reset()
                this.dataToQuery.totalPlanFrom = null;
                this.dataToQuery.totalPlanTo = null;
                this.dataToQuery.totalConsumFrom = null;
                this.dataToQuery.totalConsumTo = null;
            },
            query() {
                this.queryAjax();
            },
            submit(name) {
                this.submitAjax(name);
            },
            createEmptyDataToAdd() {
                return {
                    totalPlan:'',
                    totalConsum:'',
                    balanceRate:'',
                    waterPlan:'',
                    waterConsum:'',
                    waterBalanceRate:'',
                    wellPlan:'',
                    wellConsum:'',
                    wellBalanceRate:'',
                    geothermalPlan:'',
                    geothermalConsume:'',
                    geothermalRate:'',
                    groundWaterPlan:'',
                    groundWaterConsum:'',
                    groundWaterRate:'',
                    registrant: this.currentUser.userName,
                    registTime: new Date()
                }
            }
        },
        watch:{
        },

    }
</script>

<style lang='css' scoped>

</style>
